<template>
  <div>
    <el-tree ref="tree" :data="treeData" highlight-current :props="defaultProps" @node-click="xxx">
      <span slot-scope="{ node, data }">
        <span v-if="node.level!=2">{{ node.label }}</span>
        <el-radio v-else v-model="selectedNode" :label="data.key">
          {{ node.label }}
        </el-radio>
      </span>
    </el-tree>
  </div>
</template>

<script>
import debounce from 'lodash.debounce'

export default {
  name: 'HelloWorld',
  data() {
    return {
      defaultProps: {
        label: 'label',
        children: 'children'
      },
      treeData: [{
        id: 1,
        key: 1,
        label: '水源',
        children: [{
          id: 1,
          key: 1,
          label: '设备1',
        }, {
          id: 2,
          key: 2,
          label: '设备2'
        }]
      }],
      selectedNode: undefined
    }
  },
  created() {
    let fn = this.handleNodeClick
    this.xxx = debounce(function(data, node) {
      fn(data, node)
    }, 150)

  },
  methods: {
    handleNodeClick(data) {
      console.log(`小样，你点了：${data.label}`)
    }
  }
}
</script>

<style scoped>
</style>
